<template lang='pug'>
  .step-1
    .form-shebao-title.font-16.font-weight 营业执照信息
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="160")
      Row(type="flex" justify="start")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="法定名称：" prop="registerName")
            Input.input-has-border(v-model="formValidate.registerName" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="统一社会信用代码：" prop="unifiedCreditCode")
            Input.input-has-border(v-model="formValidate.unifiedCreditCode" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem.ivu-form-item-required(label="纳税人性质：")
            Select.input-has-border(v-model="formValidate.taxpayerType"  placeholder="请选择" @on-change="taxpayerTypeChange")
              Option(v-for="(item, index) in getCustomerTaxpayertypeArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          Poptip(trigger="hover" word-wrap style="width:100%" content="温馨提示：社保、公积金、工资、个税、手续费属于代扣代缴项目，仅支持开具增值税普通发票。")
            FormItem(label="发票种类：" prop="invoiceType")
              Select.input-has-border(v-model="formValidate.invoiceType"  placeholder="请选择" @on-change="invoiceTypeChange")
                template(v-for="(item, index) in getInvoicetypeArr()")
                  Option(v-if="item.key==='2'" :value="item.key" :disabled="formValidate.taxpayerType === '2'") {{ item.value }}
                  Option(v-else :value="item.key") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="注册地址：" :class="mustHave?'ivu-form-item-required':''" )
            Input.input-has-border(v-model="formValidate.registerAddress" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="电话：" :class="mustHave?'ivu-form-item-required':''")
            Input.input-has-border(v-model="formValidate.phone" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="开户行名称：" :class="mustHave?'ivu-form-item-required':''" )
            Input.input-has-border(v-model="formValidate.bankName" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="开户行账号：" :class="mustHave?'ivu-form-item-required':''" )
            Input.input-has-border(v-model="formValidate.accountNo" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="注册资本：")
            Input.input-has-border(v-model="formValidate.registerCapital" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="成立时间：")
            DatePicker.input-has-border(v-model="formValidate.foundedDate" type="date" placeholder="请选择")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="公司规模：")
            Select.input-has-border(v-model="formValidate.size"  placeholder="请选择" clearable)
              Option(v-for="(item, index) in getSizeArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="法定代表人：")
            Input.input-has-border(v-model="formValidate.legalPerson" placeholder="请输入")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="公司类型：")
            Select.input-has-border(v-model="formValidate.companyType" :label-in-value="true"  placeholder="请选择" clearable @on-change="companyTypeChange")
              Option(v-for="(item, index) in getCompanyTypeArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="所属行业：")
            Select.input-has-border(v-model="formValidate.businessType" :label-in-value="true"  placeholder="请选择" clearable @on-change="businessTypeChange")
              Option(v-for="(item, index) in getBusinesstypeArr()" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          FormItem(label="备注：")
            Input.input-has-border(v-model="formValidate.remarks" placeholder="请输入")
      FormItem(label="经营范围：")
        Input.input-has-border(v-model="formValidate.domain" type="textarea" placeholder="请输入")
      FormItem(label="营业执照：")
        .d-flex
          .position-relative.mr-10
            img(v-if="license_img" :src="imgUrl" @click="previewImg")
            Icon.img-close(v-if="license_img" type="md-close-circle" size="20" @click="deleteImg")
            Upload.mb-20(v-show="!license_img" ref="licenseUploadRef" :before-upload="licenseUpload" :action="uploadBaseUrl+'/Customer/'+customerId+'/Upload'" :data="{categoryname: '营业执照副本'}" accept=".jpg, .jpeg, .png" :format="['jpg','jpeg','png']")
              .license-img
                Icon( type="ios-image-outline" size="60")
          span 支持jpg、jpeg、png格式     
</template>

<script>
import dataApi from '@/api/data'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  name:'stpe_2',
  props:{
    customerId: String
  },
  inject: ['getCustomerTaxpayertypeArr', 'getInvoicetypeArr', 'getSizeArr', 'getCompanyTypeArr', 'getBusinesstypeArr'],
  data () {
    return {
      mustHave: false,
      license_img: '', // 营业执照图片
      imgUrl: '',
      uploadBaseUrl: baseUrl,
      // 基本信息
      formValidate: {
        registerName: '', // 法定名称
        unifiedCreditCode: '', // 统一社会信用代码
        taxpayerType: '1', // 纳税人性质
        invoiceType: '1', // 发票种类
        registerAddress: '', // 注册地址
        phone: '', // 电话
        bankName: '', // 开户行名称
        accountNo: '', // 开户行账号
        registerCapital: '', // 注册资本
        foundedDate: '', // 成立时间
        size: '', // 公司规模
        legalPerson: '', // 法定代表人
        companyType: '', // 公司类型ID
        companyTypeName: '', // 公司类型名称
        businessType: '', // 所属行业ID
        businessTypeName: '', // 所属行业名称
        remarks: '', // 备注
        domain: '', // 经营范围
        rowversion: '' // 新为空,修改时原值返回
      },
      // 验证规则
      ruleValidate: {
        registerName: [
          { required: true, message: '请输入法定名称', trigger: 'blur' }
        ],
        unifiedCreditCode: [
          { required: true, message: '请输入社会信用代码', trigger: 'blur' },
          { type: 'string', message: '请输入正确的统一社会信用代码', pattern: /^\w{15}|\w{17}|\w{18}|\w{20}$/ }
        ],
        taxpayerType: [
          { required: true, message: '纳税人性质不能为空', trigger: 'change' }
        ],
        invoiceType: [
          { required: true, message: '发票种类不能为空', trigger: 'change' }
        ]
      }
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    taxpayerTypeChange (val) {
      this.formValidate.invoiceType = ''
    },
    invoiceTypeChange (val) {
      console.log(val)
      if (val === '2') {
        this.mustHave = true
      } else {
        this.mustHave = false
      }
    },
    // 公司类型选择
    companyTypeChange (val) {
      if (val) {
        this.formValidate.companyTypeName = val.label
      } else {
        this.formValidate.companyTypeName = ''
      }
    },
    // 所属行业选择
    businessTypeChange (val) {
      if (val) {
        this.formValidate.businessTypeName = val.label
      } else {
        this.formValidate.businessTypeName = ''
      }
    },
    // 营业执照
    licenseUpload (file) {
      const models = ['.jpg', '.jpeg', '.png']
      let first = file.name.lastIndexOf(".")
      let namelength = file.name.length
      let filesuffix = file.name.substring(first, namelength)
      if (models.includes(filesuffix)) {
        this.license_img = file
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          const _base64 = reader.result
          this.imgUrl = _base64
        }
      } else {
        this.$Message.error('文件格式不对')
      }
      return false
    },
    deleteImg () {
      this.license_img = ''
      this.imgUrl = ''
    },
    previewImg () {
      this.$emit('on-preview', this.imgUrl)
    },
    // 保存--营业执照信息
    stepSubmit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          dataApi.postLicense(Object.assign({ CustomerId: this.customerId }, this.formValidate)).then((res) => {
            if (this.license_img) {
              this.$refs.licenseUploadRef.post(this.license_img)
            }
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.$emit('on-next', 3)
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
      this.$refs['formValidate'].resetFields()
    }
  },

  watch: {
  },

}

</script>
<style lang='less' scoped>
  .d-flex{
    display: flex;
    align-items: center;
  }
  .position-relative{
    .license-img{
      width: 100%;
      height: 100%;
      cursor: pointer;
      line-height: 80px;
      text-align: center;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .img-close{
      position: absolute;
      top: -8px;
      right: -8px;
      z-index: 9;
      cursor: pointer;
    }
  }
</style>